<!--  ERC-设备管理-设备台账页面-树形弹窗页面弹窗页面 -->
<template>
  <px-dialog v-model="TabledialogVisible" class="equip-dialog" :title="typeTitle" width="640px" @open="openDialog" @close="closeDialog">
    <px-form ref="formRef" :model="formValue" :rules="rules" label-position="right" label-width="120px">
      <px-form-item label="标题" prop="title">
        <px-input v-model="formValue.title" placeholder="请输入" maxlength="50" clearable />
      </px-form-item>
      <px-form-item label="单位" prop="unit">
        <px-input v-model="formValue.unit" placeholder="请输入" maxlength="50" clearable />
      </px-form-item>
      <px-form-item label="自定义位号" prop="tagNum">
        <px-input v-model="formValue.tagNum" placeholder="请输入" maxlength="50" clearable />
      </px-form-item>
      <px-form-item label="排序" prop="attrSort">
        <!-- <px-input v-model="formValue.attrSort" placeholder="请输入类型名称" maxlength="50" clearable /> -->
        <px-input-number v-model="formValue.attrSort" :precision="0" :step="1" clearable placeholder="请输入" />
      </px-form-item>
      <px-form-item label="实际位号" prop="specCode">
        <px-input v-model="formValue.specCode" placeholder="请输入" maxlength="50" clearable />
      </px-form-item>

      <px-form-item label="值" prop="value">
        <px-input v-model="formValue.value" placeholder="请输入" maxlength="50" clearable />
      </px-form-item>
      <px-form-item label="备注" prop="remark">
        <px-input v-model="formValue.remark" placeholder="请输入" maxlength="50" clearable />
      </px-form-item>
      <px-form-item label="值类型" prop="valueType">
        <px-select v-model="formValue.valueType" class="w-full" maxlength="50" placeholder="请选择" clearable>
          <px-option v-for="item in valueTypeList" :key="item.value" :label="item.name" :value="item.value" />
        </px-select>
      </px-form-item>
      <px-form-item label="值枚举" prop="valueEnum">
        <px-input v-model="formValue.valueEnum" placeholder="请输入" maxlength="500" clearable />
      </px-form-item>
      <px-form-item label="分组" prop="groupName">
        <px-input v-model="formValue.groupName" placeholder="请输入" maxlength="50" clearable />
      </px-form-item>
      <px-form-item label="数据来源" prop="dataSource">
        <px-select v-model="formValue.dataSource" class="w-full" placeholder="请选择数据来源" clearable filterable>
          <px-option v-for="source in sources" :key="source.key" :value="source.value" :label="source.label" />
        </px-select>
      </px-form-item>
    </px-form>
    <div class="equip-dialog-footer">
      <px-button @click="closeDialog">取消</px-button>
      <px-button type="primary" @click="handleSubmit(formRef)">保存</px-button>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs, computed } from "vue";
import { PxMessage } from "px-ui";
import { queryDictData } from "@/api/common";
import { saveOrUpdate } from "@/api/visual/module";
import { cloneDeep } from "@pureadmin/utils";

import { dataList } from "@/api/system/dictData";

// 调用父级-关闭弹窗、查询列表方法
const emits = defineEmits(["closeDialog", "queryTable", "queryTreeRight"]);
// 父级传过来的值
const props = defineProps({
  // 控制弹窗显示隐藏
  TabledialogVisible: {
    type: Boolean,
    default: false
  },
  // 弹窗类型 add 新增 edit 编辑
  tableType: {
    type: String,
    default() {
      return "add";
    }
  },
  // 表单数据
  dialogRow: {
    type: Object,
    default() {
      return {};
    }
  },

  componentNo: {
    type: String,
    default: ""
  },
  //判断是点击的是子组件还是组件
  parentNo: {
    type: String,
    default: ""
  },
  rightData: {
    //中间树数据
    type: Object,
    default() {
      return {};
    }
  }
});
const TabledialogVisible = computed(() => props.TabledialogVisible);
// 页面本身的值
const formRef = ref();
const state = reactive<any>({
  typeTitle: "新增",
  formValue: {
    attrSort: 0
  },
  //是否子组件
  isChildList: [
    { label: "是", value: 1 },
    { label: "否", value: 0 }
  ],
  //组件类型
  compTypeList: [
    { label: "普通组件", value: 1 },
    { label: "点位数据列表", value: 2 },
    { label: "饼状图", value: 3 },
    { label: "业务列表", value: 4 }
  ],
  //子组件类型
  childrenTypeList: [
    { label: "组件", value: 1 },
    { label: "数据列表", value: 2 }
  ],
  //科室
  classNameList: [],
  valueTypeList: [],
  sources: []
});
const { formValue, typeTitle, isChildList, compTypeList, childrenTypeList, classNameList, valueTypeList, sources } = toRefs(state);
// 表单校验规则
const rules = computed(() => ({
  name: [{ required: true, message: "类型名称不能为空", trigger: ["blur", "change"] }]
}));
const getvalueTypeListSelect = async () => {
  const valueTypeListData = await queryDictData({ typeCode: "VISUAL_COM_VALUE_TYPE" });
  valueTypeList.value = [...valueTypeListData];
};
// 打开弹窗
const openDialog = async () => {
  await getvalueTypeListSelect();
  formRef.value.resetFields();
  formValue.value.componentNo = props.componentNo;
  if (props.tableType === "add" || props.tableType === "copy") {
    typeTitle.value = "新增";
    if (props.tableType === "copy") {
      let copyData = cloneDeep(props.dialogRow);
      delete copyData.id;
      copyData.title = "";
      copyData.tagNum = "";
      copyData.specCode = "";
      copyData.value = "";
      formValue.value = copyData;
    }
  } else if (props.tableType === "edit") {
    typeTitle.value = "编辑";
    formValue.value = props.dialogRow;
  }
};
// 关闭弹窗
const closeDialog = () => {
  formValue.value = {
    componentNo: ""
  };
  emits("closeDialog");
};
// 提交
const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      if (props.tableType === "add" || props.tableType === "copy") {
        const params = formValue.value;
        await saveOrUpdate(params);
        PxMessage.success("新增成功");
        emits("closeDialog");
        emits("queryTable");
      } else if (props.tableType === "edit") {
        const params = formValue.value;
        formValue.value.attrKey = "";
        await saveOrUpdate(params);
        PxMessage.success("编辑成功");
        emits("closeDialog");
        emits("queryTable");
      }
    }
  });
};

const getSources = async () => {
  const res = await dataList({ pageSize: 999, typeCode: "VISUAL_DATA_SOURCE" });
  console.log("res====>", res);
  if (res?.length > 0) {
    sources.value = res.map(item => {
      return {
        label: item.itemName,
        value: item.itemValue,
        key: item.id
      };
    });
    return;
  }
  sources.value = [];
};

getSources();
</script>
<style lang="scss" scoped>
.equip-dialog {
  .equip-dialog-footer {
    margin-top: 108px;
    text-align: right;
  }
}
</style>
